<template>
  <div id="tabbar">
    <ul class="list">
      <li>
        <router-link to='/home'>
          <span class="iconfont icon-shouye"></span>
          <span>首页</span>
        </router-link>
      </li>
      <li>
        <router-link to='/classify'>
          <span class="iconfont icon-biaoqiankuozhan_tuijian-126"></span>
          <span>分类</span>
        </router-link>
      </li>
      <li>
        <router-link to='/car'>
          <span class="iconfont gouwuche-n icon-tubiao-"></span>
          <span>购物车</span>
        </router-link>
      </li>
      <li>
        <router-link to='/mine'>
          <span class="iconfont icon-wode"></span>
          <span>我的</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>

.lh{
  line-height: 100%;
};

.fs{
  font-size: 0.12rem;
}

#tabbar {
  width: 100%;
  height: 0.44rem;
  background: #f6f6f6;
  border-top: 0.01rem solid #d5d5d5;
  position: fixed;
  z-index: 999;
  bottom: 0;
  left: 0;
  .list{
    width: 100%;
    display: flex;
    li{
      width: 25%;
      text-align: center;
      position: relative;
      span:first-of-type{
        color: #8f8f8f;
        .lh;
        font-size: 0.22rem;
        margin-top: 5px;
      }
      span:last-of-type{
        color: #202020;
        .lh;
        .fs;
        margin-top: 2px;
      }
      i{
        min-width: 0.16rem;
        height: 0.16rem;
        line-height: 0.16rem;
        text-align: center;
        color: #fff;
        background: red;
        top: 0.01rem;
        right: 0.08rem;
        font-style: normal;
        border-radius: 50%;
        position: absolute;
      }
    }
  }
}

#tabbar a{
  display: inline-block;
  display: flex;
  flex-direction: column;
}

a.active span{
  color: #87D7F3 !important;
}

</style>
